@inject Eqwww.Config.IAppConfigProvider AppConfigProvider
@{
    ViewData["Title"] = "自定头像";
    Layout = "~/Views/Shared/_ManageFormLayout.cshtml";

    var appConfig=AppConfigProvider.Load();
    var maxfilesize=appConfig.SelfAvatarImageMaxSize.ToString()+"K";
}
<link rel="stylesheet" type="text/css" href="~/lib/dropify/dist/css/dropify.min.css" />
<link rel="stylesheet" type="text/css" href="~/lib/cropper/dist/cropper.min.css" />
<div class="mdui-m-t-2"></div>
<form id="form1">
<div class="mdui-container">
    <div class="mdui-row">
        
        <div class="mdui-col-xs-12 mdui-col-sm-3">
            <div class="mdui-p-r-2">
            <div class="">选择图片</div>
            <input type="file" id="inputFileNow" name="inputFileNow" class="dropify" data-allowed-file-extensions="jpg jpeg gif png" data-max-file-size="@maxfilesize" />
            </div>
        </div>

        <div class="mdui-col-xs-12 mdui-col-sm-8 mdui-col-offset-sm-1">
            <div class="">裁剪图片</div>
            <div style="max-height:400px;" class="mdui-m-b-1">
                <img src="~/images/0612.jpg" id="img1" style="max-width:100%;" />
            </div>

        </div>
        <div class="mdui-col-xs-12 mdui-col-sm-8 mdui-col-offset-sm-4 mdui-clearfix">
            <div class="img-preview" style="float:left;width:128px;height:128px;overflow:hidden;">
            </div>
            <div class="img-preview mdui-m-l-1" style="float:left;width:64px;height:64px;overflow:hidden;">
            </div>
            <div class="img-preview mdui-m-l-1" style="float:left;width:32px;height:32px;overflow:hidden;">
            </div>
            
        </div>
    </div>
</div>
</form>

@section Scripts {
    <script src="~/lib/dropify/dist/js/dropify.min.js"></script>
    <script src="~/lib/cropper/dist/cropper.min.js"></script>
    <script src="~/lib/jquery-cropper/dist/jquery-cropper.min.js"></script>

    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <script>

$(function () {
  $('.dropify').dropify({
    messages: {
      'default': '点击或拖拽文件到这里',
      'replace': '点击或拖拽文件到这里来替换文件',
      'remove': '移除文件',
      'error': '对不起，你上传的文件太大了',
    },
    error: {'fileSize': '文件超出大小限制 ({{ value }}).','minWidth': '图片宽度太小了 ({{ value }}}px).','maxWidth': '图片宽度太大了 ({{ value }}}px ).','minHeight': '图片高度太小了 ({{ value }}}px).','maxHeight': '图片高度太大了 ({{ value }}px ).','imageFormat': '图片格式不正确 ({{ value }}).'}
  });

  var options = {
    aspectRatio: 1,
    rotatable: false,
    viewMode: 2,
    preview: '.img-preview'

  };

  var $inputImage = $('#inputFileNow');
  var $image = $('#img1');

  var originalImageURL = $image.attr('src');
  var uploadedImageName = 'cropped.jpg';
  var uploadedImageType = 'image/jpeg';
  var uploadedImageURL;

  $image.cropper(options);
  var cropper = $image.data('cropper');

  var URL = window.URL || window.webkitURL;

  if (URL) {
    $inputImage.change(function () {
      var files = this.files;
      var file;

      if (!$image.data('cropper')) {
        return;
      }

      if (files && files.length) {
        file = files[0];
        if (/^image\/\w+$/.test(file.type)) {
          uploadedImageName = file.name;
          uploadedImageType = file.type;

          if (uploadedImageURL) {
            URL.revokeObjectURL(uploadedImageURL);
          }

          uploadedImageURL = URL.createObjectURL(file);
          $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
          //$inputImage.val('');
        } else {
          window.alert('未知的图片格式');
        }
      }
    });
  } else {
    $inputImage.prop('disabled', true).parent().addClass('disabled');
  }

});

function btn_get() {
  var $image = $('#img1');
  var data = $image.cropper('getData');
  return data;
}

function submitForm(index) {
  var files=$('#inputFileNow')[0].files;
  if(files.length<=0){
    top.$.modalAlert('未选择文件');
  }

  top.$.loadingBox(false);

  var formData = new FormData($("#form1")[0]);

  var cropData=btn_get();
  var str='';
  for(var k in cropData){
    str+='&'+k+'='+Math.round(cropData[k]);
  }

  $.ajax({
    url: "/SystemManage/MyAccount/CustomAvatarSubmit?c=1"+str,
    data: formData,
    type: 'POST',
    async: true,
    cache: false,
    processData: false,
    contentType: false,
    beforeSend: function (xhr) {
      xhr.setRequestHeader("XSRF-TOKEN",
          $('[name="__RequestVerificationToken"]').val());
    },
    success: function (returndata) {
      top.$.loadingBox(true);
      if(returndata.state=='success'){
        top.frames['layui-layer-iframe' + index].location.reload();
        $.modalClose();
      }
      else{
        $.modalAlert(retundata.message);
      }
    },
    error: function (returndata) {
      top.$.loadingBox(true);
      $.modalAlert(retundata.message);

    }
  });


};

    </script>
     
}